<template>
	<div>
		<el-card>
			<el-row
				:gutter="20"
				style="
					padding-bottom: 16px;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				"
			>
				<el-col :span="7">
					<el-input
						placeholder="输入考试id以查询考试记录"
						v-model="idForSearch"
						style="height: 34px;"
					></el-input>
				</el-col>
				<el-button type="primary" :icon="Search" @click="searchById(idForSearch)">搜索</el-button>
				<!-- <el-button type="primary" >
					添加考试记录
				</el-button> -->
			</el-row>

			<el-table
				:data="tableData"
				stripe
				style="width: 100%"
				
			>
				<el-table-column
					v-for="(item, index) in options"
					:key="index"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
				>
					<template
						v-if="item.prop == 'actions'"
						#default="{ row }"
					>
						<el-button type="primary" size="small" @click="updateExamHistory(row)" >
							修改信息
						</el-button>
						<el-button
							type="warning"
							size="small"
							@click="deleteExamHistory(row)"
						>
							删除记录
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				v-model:current-page="queryForm.pageNum"
				v-model:page-size="queryForm.pageSize"
				:page-sizes="[2, 5, 10, 15]"
				layout="sizes, prev, pager, next"
				:total="1000"
			/>
		</el-card>
		<addQstionDialogue v-model="addDialogVisible"></addQstionDialogue>
		<updateQstionDialogue v-model="updateDialogVisible"></updateQstionDialogue>
	</div>
</template>

<script setup lang="ts">
import addQstionDialogue from '@/components/dialogue/addQstionDialogue.vue'
import updateQstionDialogue from '@/components/dialogue/updateQstionDialogue.vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { options } from './options'
import { onMounted, ref, Ref } from 'vue'
import{getLeveExamById,getAllLeveExam,type ExamHistory,deleteLeveExam}from '@/api/test/examHistory'
import $bus from '@/bus'
// import { Question } from '@/api/test/wirttenTest'

const idForSearch= ref('')
const addDialogVisible = ref(false)
const updateDialogVisible = ref(false)
const queryForm = ref({
	pageNum: 1,
	pageSize: 50
})
const tableData: Ref<ExamHistory[]> = ref([])
//
async function initExamHistory(pageNum: number, pageSize: number){
const res=await getAllLeveExam(pageNum,pageSize)
tableData.value=res
}
onMounted(() => {
	initExamHistory(queryForm.value.pageNum, queryForm.value.pageSize)
})
//查找用户
const searchById=async(_id:string)=>{
	if (_id) {
		const res = await getLeveExamById(_id)
		if (res != '') {
			tableData.value = []
			tableData.value.push(res)
		} else {
			ElMessage({
				message: '未找到该考试记录',
				type: 'warning'
			})
		}
	} 
}
//修改题目信息
const sendInfoToUpdate = (row:ExamHistory) => {
	$bus.emit('sendExamHistoryInfo', { row })
}

const updateExamHistory = (row: any) => {
	updateDialogVisible.value = true
	sendInfoToUpdate(row)
}
// const handleFormSubmit = (form: UserInfo) => {
// 	console.log(form)
// 	tableData.value.push(form)
// 	const res = reqAddUser(form)
// 	console.log(res)
// }

// 添加题目
// const addQuestion = (row:Question) => {
// 	addDialogVisible.value = true
// 	sendInfoToUpdate(row)
// }

// const handleFormSubmit = (form: Question) => {
// 	console.log(form)
// 	tableData.value.push(form)
// 	const res = createLeveQuestionBank(form)
// 	console.log(res)
// }
// 删除用户
const deleteExamHistory = (row: any) => {
	ElMessageBox.confirm('你确认要删除该信息吗?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		await deleteLeveExam(row.id)
		ElMessage({
			message: '删除成功'
		})
	})
	initExamHistory(1,100)
}
</script>

<style scoped>
.header {
	margin-bottom: 20px;
	box-sizing: border-box;
}
</style>
